<template>
  <MkQueryContainer>
    <template #header>
      <el-form label-width="auto" :inline="true">
        <el-form-item label="关键字">
          <el-input @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
        </el-form-item>
        <el-form-item>
          <MkButtonQuery @click="search"> </MkButtonQuery>
          <MkButtonAdd @click="add"></MkButtonAdd>
        </el-form-item>
      </el-form>
    </template>
    <MkTable :data="tableData" v-loading="loading" @row-dblclick="code">
      <MkColumnIndex />
      <MkColumn prop="category" label="分组" />
      <MkColumn prop="code" label="代码" />
      <MkColumn prop="title" label="标题" autoWidth />
      <MkColumn prop="remark" label="备注" />
      <MkColumnOption @show="edit" @delete="del" deleteShowFile="title">
        <template #default="{ row }">
          <el-button icon="ele-Edit" size="small" text @click="code(row)">开发</el-button>
        </template>
      </MkColumnOption>
    </MkTable>
    <MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
      @query="search" />
    <AddPage ref="addPageRef" @onSuccess="search" />
    <EditPage ref="editPageRef" @onSuccess="search" />
    <CodePage ref="codePageRef" @onSuccess="search" />
  </MkQueryContainer>
</template>

<script lang='ts' setup name="basPrint">
// 接口
import { BasPrintApi } from '/@/api/bas/basPrint';
import { BasPrint } from '/@/api/bas/basPrint/dto';
// hooks
import { usePageQuery } from '/@/hooks/usePageQuery'
// 工具
import { clog } from '/@/utils'

import AddPage from './add.vue'
import EditPage from './edit.vue'
import CodePage from './code.vue'

const { searchParam, total, tableData, loading, search } = usePageQuery<BasPrint>(BasPrintApi().page)

const addPageRef = ref();
const editPageRef = ref();
const codePageRef = ref();
const category = ref("print");

onMounted(() => {
  search();
})

const add = () => {
  addPageRef.value.open();
}

const edit = (row: any) => {
  editPageRef.value.open(row);
}

//开发
const code = (row: any) => {
  codePageRef.value.open(row);
}

const del = async (row: any) => {
  // 打开删除确认弹窗
  await BasPrintApi().delete(row.id);
  search()
}

</script>

<style lang='scss' scoped></style>